import React from 'react';

import '../../static/setting/index.styl'
import {Icon, Button, Popover, message, Modal} from 'antd';
import axios from 'axios'
import Loading from '../common/Loading'
import AddModal from './addModules';
import EditModal from './editModules';
const confirm = Modal.confirm;

export default class Setting extends React.Component {
  state = {
    visible: false,
    hideEditModal: false,
    moduleItem: {}
  }
  hideModal = () => {
    this.setState({
      visible: false
    })
  }

  showModal = () => {
    this.setState({
      visible: true
    })
  }
  hideEditModal = () => {
    this.setState({
      hideEditModal: false
    })
  }

  showEditModal = () => {
    this.setState({
      hideEditModal: true
    })
  }

  edit = (id) => {
    let data = this.props.moduleList.filter((item) => {
      return item.id === id
    })
    this.setState({
      moduleItem: data[0]
    }, () => {
      this.showEditModal();
    })
  }

  delModuleById = async (id) => {
    let res = await
      axios.post('vrv-monitor-platform-web/module/delete', {
        id: id
      })
    if (res.data.statusCode === 200) {
      message.success('删除成功')
      this.props.moduleActions.fetchModules();
    } else {
      message.error(res.data.message)
    }
  }

  showToHome = async (id, num) => {
    this.props.moduleActions.showInHome(id,num);
    message.success(num==='1'?"添加成功":"移除成功")
  };


  componentDidMount() {
    this.props.moduleActions.fetchModules();
  }

  render() {
    let buttonStyle = {
      border: 'none', fontSize: '12px', padding: 0, height: '22px',
    }
    let colors = ['#007be2', '#ff5a5a', '#3bcd6a', '#ffa72a', '#3bcd6a', '#ffa72a', '#007be2', '#ff5a5a'];
    return (
      <div className="homeSetting">
        {
          this.props.moduleList ? <div>{
            this.props.moduleList.length > 0 ? this.props.moduleList.map((item, i) => {
              return <div className="topic" key={i}>
                <div className="topBorder" style={{backgroundColor: colors[i]}}></div>
                <div className="section">
                  <div className="title">
                    <div className="titleName">
                      {item.moduleName}
                    </div>
                    <div className="imgBox">
                      <Popover placement="rightTop"
                               content={<div className="operation" style={{width: '40px', textAlign: 'center'}}>
                                 <Button size="small"
                                         style={buttonStyle}
                                         onClick={() => {
                                           confirm({
                                             title: '提示',
                                             content: '确定删除吗',
                                             onOk: ()=>{
                                               this.delModuleById(item.id)
                                             },
                                           })
                                         }}>删除</Button>
                                 <Button size="small"
                                         style={buttonStyle}
                                         onClick={() => {
                                           this.edit(item.id)
                                         }}>修改</Button>
                                 <Button size="small" style={buttonStyle} onClick={() => {
                                   this.showToHome(item.id, '0')
                                 }} title="从首页移出">移除</Button>
                               </div>} trigger="click">
                        <img src={require('../../static/images/oval.png')} style={{verticalAlign: 'sub'}} alt="404"/>
                      </Popover>
                    </div>
                  </div>
                  <div className="cont">
                    <div>{item.description}</div>
                  </div>
                  <p className="footer"><Button style={{border: 'none', padding: 0}} onClick={() => {
                    this.showToHome(item.id, '1')
                  }}>{item.home === '1' ? '已添加至首页' : '添加至首页'}</Button></p>
                </div>
              </div>
            }) : ''
          }</div> : <Loading/>
        }

        <div className="new-box">
          <div className="new">
            <Icon type="plus" style={{fontSize: '48px', color: '#d2d6da'}} onClick={this.showModal}/>
            <p>新建模块</p>
          </div>
        </div>
        {
          this.state.visible ?
            <AddModal onHide={this.hideModal} refresh={() => {
              this.props.moduleActions.fetchModules()
            }}/> : ''
        }
        {
          this.state.hideEditModal ?
            <EditModal onHide={this.hideEditModal} data={this.state.moduleItem} refresh={() => {
              this.props.moduleActions.fetchModules()
            }}/> : ''
        }
      </div>
    );
  }
}




